"""
@author: Gaoyaoxia
@date: 2020-08-13 18:14:20
"""
<!--  -->
<template>
  <div class="avatarCropper">
    <a-modal
      class="cropper-modal"
      title="编辑头像"
      :maskClosable="false"
      :confirmLoading="confirmLoading"
      :width="800"
      :visible="cropperVisible"
      @cancel="cancelHandel"
    >
      <div class="cropper-wrapper">
        <vueCropper
          ref="cropper"
          :img="options.img"
          :info="true"
          :outputType="options.outputType"
          :full="options.full"
          :canMove="options.canMove"
          :canMoveBox="options.canMoveBox"
          :original="options.original"
          :autoCrop="options.autoCrop"
          :fixed="options.fixed"
          :autoCropWidth="options.autoCropWidth"
          :autoCropHeight="options.autoCropHeight"
          :centerBox="options.centerBox"
          :infoTrue="options.infoTrue"
          :fixedBox="options.fixedBox"
        ></vueCropper>
      </div>
      <template slot="footer">
        <a-button key="back" @click="cancelHandel">取消</a-button>
        <a-button key="submit" type="primary" :loading="confirmLoading" @click="okHandel">保存</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { VueCropper } from "vue-cropper";

export default {
  components: {
    VueCropper,
  },
  data() {
    return {
      cropperVisible: false,
      confirmLoading: false,
      options: {
        img: "", // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 1, // 裁剪生成图片的质量
        outputType: "png", // 裁剪生成图片的格式
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        // autoCropWidth: 300, // 默认生成截图框宽度
        // autoCropHeight: 300, // 默认生成截图框高度
        fixedBox: false, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        full: false, // 是否输出原图比例的截图
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: true, // 截图框是否被限制在图片里面
        infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      },
      // 防止重复提交
      loading: false,
      imgName: "",
    };
  },
  methods: {
    edit(record, imgName) {
      console.log("record:", record);
      let { options } = this;
      this.cropperVisible = true;
      this.imgName = imgName;
      this.options = Object.assign({}, options, record);
    },
    cancelHandel() {
      this.options = {
        img: "", // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 1, // 裁剪生成图片的质量
        outputType: "png", // 裁剪生成图片的格式
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        // autoCropWidth: 300, // 默认生成截图框宽度
        // autoCropHeight: 300, // 默认生成截图框高度
        fixedBox: false, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        full: false, // 是否输出原图比例的截图
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: true, // 截图框是否被限制在图片里面
        infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      };
      this.cropperVisible = false;
      this.confirmLoading = false;
    },
    okHandel() {
      const that = this;
      that.confirmLoading = true;
      // 获取截图的base64 数据
      this.$refs.cropper.getCropData((data) => {
        // 转换为File对象
        let file = this.dataURLtoFile(data, this.imgName);
        console.log("file:", file);
        //将裁剪侯的图片对象返回给父组件
        that.$emit("ok", file);
        that.cancelHandel();
      });
    },
    dataURLtoFile(dataurl, filename) {
      //将base64转换为文件
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },
  },
};
</script>
<style lang='stylus' scoped>
.cropper-wrapper
  width 100%
  height 512px
</style>